 <template>
    <div class="warp-2" style="height:100%;">
        <navbar :title="msgTitle" :backCallback="back">
            <template #right>
                <a v-if="!isView" class="word-title" v-debounce="() => submit(false)" style="color: #333;">{{ $t("button_submit") }}</a><!--提交-->
            </template>
        </navbar>
        <div class="content-noBottom">
            <vue-scroll @on-scroll="onScroll" :allow-pull-down="false">
                <div class="white-bg box-12">
                    <p class="font-size20">{{ title }}</p>
                </div>
                <div class="sub-title">{{$t('evaluation_type')}}：{{evaDetail.aeType === 0 ? $t('Evaluation_lecturers_delivery') : $t('Training_effect_evaluation')}}</div>
                <div class="sub-title" v-if="evaDetail.aeType===0" >{{$t('evaluated_lecturer')}}：{{evaDetail.aeEntName}}</div>
                <div class="sub-title">{{$t('mod_submit_deadline')}}：{{evaDetail.aeEndTime}}</div>
                <div class="sub-title" v-if="evaDetail.aeDesc">{{$t('evaluated_description')}}：{{evaDetail.aeDesc}}</div>
                <div v-if="!isView" :class="{'detail-top-count' : !isPosition, 'detail-top-count-float' : isPosition}">
                    <div class="white-bg bottom-shadow box-13" :class="{'box-position' : isPosition}">
                        <ul class="clearfix">
                            <li class="color999">{{ freshInfo.length > 1 ? $t("survey_num_of_questions_2", {'value': freshInfo.length}) : $t("survey_num_of_questions", {'value': freshInfo.length}) }}</li><!--共{{ questionsInfo.total }}题-->
                            <li class="color999">{{ $t("mod_anwser") }}&nbsp;<span class="color518">({{completeList.length}})</span></li><!--已答-->
                            <li class="color999">{{ $t("mod_no_anwser") }}&nbsp;<span class="colorfc3">({{freshInfo.length - completeList.length}})</span></li><!--未答-->
                        </ul>
                    </div>
                </div>

                <div class="module-box-12">
                    <div class="margin-top10 bottom-shadow white-bg" v-for="(item, index) in freshInfo" :key="index">
                        <div v-if="item.type === 1">
                            <p class="font-size16" style="margin-bottom: 40px;">{{index + 1}}.<span v-html="item.title"></span>&nbsp;<span>[{{ $t("survey_mc_sin") }}]</span></p><!--单选题-->
                            <!-- 不可编辑 -->
                            <ul class="module-list-06 selection-01"  v-if="isView" >
                                <li v-for="(option, $index) in item.answerInfoList" :key="$index" :class="{'cur': option.id === item.answer}">
                                    <i></i>{{option.title}}
                                </li>
                            </ul>
                            <ul class="module-list-06 selection-01" v-if="!isView">
                                <li v-for="(option, $index) in item.answerInfoList" :key="$index" :class="{'cur': option.id === item.answer}" @click="selectAnswer('SINGLE',option,item)">
                                    <i></i>{{option.title}}
                                </li>
                            </ul>
                        </div>
                        <div v-if="item.type === 2">
                          <p class="font-size16" style="margin-bottom: 40px;">{{index + 1}}.<span v-html="item.title"></span>&nbsp;<span>[{{ $t("survey_mc_and") }}]</span></p><!--多选题-->
                            <!-- 不可编辑 -->
                            <ul v-if="isView" class="module-list-06 selection-02">
                                <li v-for="(option, $index) in item.answerInfoList" :key="$index" :class="{'cur': item.answer && item.answer.toString().indexOf(option.id)!=-1}">
                                    <i></i>{{option.title}}
                                </li>
                            </ul>
                            <ul v-if="!isView" class="module-list-06 selection-02">
                                <li v-for="(option, $index) in item.answerInfoList" :key="$index" :class="{'cur': item.answer && item.answer.toString().indexOf(option.id)!=-1}" @click="selectAnswer('OR',option,item)">
                                    <i></i>{{option.title}}
                                </li>
                            </ul>
                        </div>
                        <div v-if="item.type === 3">
                            <p class="font-size16" style="margin-bottom: 40px;">{{index + 1}}.<span v-html="item.title"></span>&nbsp;<span>[{{ $t("survey_question") }}]</span></p><!--问答题-->
                            <div class="textarea-box-01">
                                <van-field class="weui-cell" autosize v-model="inputAnswer[index]" :placeholder="$t('answer_prompt_2')" maxlength="1000" show-word-limit :readonly="isView" @input="selectAnswer('FB',inputAnswer[index],item)" type="textarea"/>
                            </div>
                        </div>
                    </div>
                </div>
            </vue-scroll>
        </div>
        <!--tip-->
        <van-dialog
            v-model="leaveHint"
            show-cancel-button
            :title="$t('confirm_exit_1')"
            :message="$t('confirm_exit_content_4')"
            :confirmButtonText="$t('sure')"
            :cancelButtonText="$t('cancel')"
            @confirm="$router.go(-1)"
            >
        </van-dialog>
        <!--您还有题目没有完成，确定提交答案？-->
        <van-dialog
        v-model="show"
        show-cancel-button
        :title="$t('survey_tips_1')"
        :message="$t('survey_tips_2')"
        :confirmButtonText="$t('sure')"
        :cancelButtonText="$t('cancel')"
        @confirm="submit(true)"
        >
        </van-dialog>
        <van-dialog
            v-model="show"
            show-cancel-button
            :title="$t('survey_tips_1')"
            :message="$t('survey_tips_2')"
            :confirmButtonText="$t('sure')"
            :cancelButtonText="$t('cancel')"
            @confirm="submit(true)"
            >
        </van-dialog>
        <!--确定提交答案？-->
        <van-dialog
            v-model="showOk"
            show-cancel-button
            :title="$t('confirm_exit_3')"
            :message="$t('survey_tips_2')"
            :confirmButtonText="$t('sure')"
            :cancelButtonText="$t('cancel')"
            @confirm="submit(true)"
            >
        </van-dialog>
        <van-dialog
            v-model="submitOk"
            :title="$t('survey_tips_3')"
            :confirmButtonText="$t('sure')"
            @confirm="submitTag"
            >
        </van-dialog>
        <van-dialog
            v-model="submitQue"
            :title="$t('survey_que')"
            :confirmButtonText="$t('sure')"
            @confirm="showSub"
            >
        </van-dialog>
    </div>
</template>

<script>
import { Notify } from 'vant';
import vueScroll from '@/repeatComponents/vueScroll/VueScroll';
export default {
    name: 'detail',
    components: {
        vueScroll,
        [Notify.Component.name]: Notify.Component
    },
    data() {
        return {
            questionsInfo: {},
            inputAnswer: {},
            mod_id: '',
            show: false,
            showOk: false,
            startTime: new Date(),
            submitOk: false,
            type: 'eva',
            msgTitle: this.$t('find_survey'), //调查问卷
            leaveHint: false,
            isPosition: false,
            /******************/
            freshInfo: [],
            completeList: [],
            title: '',
            submitQue: false,
            isView: false,
            evaDetail: {}
        };
    },
    methods: {
        back() {
            // console.log('返回', this.completeList.length > 0);
            if (this.completeList.length > 0 && !this.isView) {
                this.leaveHint = true;
            } else {
                this.$router.go(-1);
            }
        },
        submitTag() { //提交好的跳转
            this.$router.go(-1);
        },
        showSub() {
            this.submitQue = false;
        },
        onScroll(position) {
            if (position > 130) {
                this.isPosition = true;
            } else {
                this.isPosition = false;
            }
        },
        selectAnswer(type, topic, item) {
            if (type === 'SINGLE') {
                this.$set(item, 'answer', topic.id);
            } else if (type === 'FB') {
                this.$set(item, 'answer', topic);
            } else { //多选
                if (item.answer) {
                    //已经选中，重复点击撤销
                    if (item.answer.toString().indexOf(topic.id) === -1) {
                        this.$set(topic, 'answer', item.answer += `~${topic.id}`);
                    } else {
                        let arr = item.answer.toString().split('~');
                        arr.splice(arr.indexOf((topic.id).toString()), 1);
                        this.$set(item, 'answer', arr.join('~'));
                    }
                } else {
                    this.$set(item, 'answer', topic.id);
                }
            }
            if (item.answer) {
                if (this.completeList.indexOf(item.id) === -1) {
                    this.completeList.push(item.id);
                }
            } else {
                this.completeList.splice(this.completeList.indexOf(item.id), 1);
            }
        },
        postSubmit(req) {
            this.$axios({
                method: 'POST',
                url: `/app/api/course/answer/info`,
                data: req
            }).then(res => {
                this.submitOk = true;
            }).catch(err => {
                // console.log(err, err.response.data.errMsg);
                Notify({
                    message: err.response.data.errMsg,
                    color: '#fff',
                    background: '#D9001B'
                });
            });
        },
        submit(isJump) {
            if (isJump) { //封装数据
                let tempReq = [];
                let req = {};
                this.freshInfo.forEach(v => {
                    if (v.answer) {
                        let temp = {};
                        if (v.type === 2 || v.type === 1) {
                            let selected = v.answer.toString().split('~');
                            temp = {
                                subjectId: v.id,
                                subjectTitle: v.title,
                                moduleId: v.modelId,
                                subjectType: v.type,
                                answerIdList: selected
                            };
                        } else {
                            temp = {
                                subjectId: v.id,
                                subjectTitle: v.title,
                                moduleId: v.modelId,
                                subjectType: v.type,
                                content: v.answer
                            };
                        }
                        tempReq.push(temp);
                    }
                });
                req.startTime = this.startTime;
                req.itmId = 0;
                req.subjectInfoList = tempReq;
                this.postSubmit(req);
            }
            if (this.freshInfo.length !== this.completeList.length) {
                // this.show = true;
                this.submitQue = true;
            } else {
                this.showOk = true;
            }
        },
        //获取新的详情接口
        getFreshDetail() {
            // 没做是这个api/trainee/course/lesson/record/list，做了是listHistory
            if (this.isView) { // 查看有答案的
                this.$axios({
                    method: 'GET',
                    url: `/app/api/course/answer/listHistory`,
                    params: {
                        moduleId: this.$route.params.id
                    }
                }).then(res => {
                    const list = res.data.evaluationSubjectInfoList;
                    list.forEach(v => {
                        v.answer = '';
                    });
                    list.forEach((item, index) => {
                        switch (item.type) {
                        case 1:
                            item.answerInfoList.forEach(child => {
                                if (item.userSubmit && item.userSubmit.length > 0) {
                                    if (Number(item.userSubmit[0]) === child.id) {
                                        item.answer = child.id;
                                    }
                                }
                            });
                            break;
                        case 2:
                            item.answerInfoList.forEach(child => {
                                if (item.userSubmit && item.userSubmit.length > 0) {
                                    if (item.userSubmit.includes(String(child.id))) {
                                        item.answer = item.answer ? item.answer + ',' + (child.id) : (child.id);
                                    }
                                }
                            });
                            break;
                        case 3:
                            this.inputAnswer[index] = item.userSubmit ? item.userSubmit[0] : '';
                            break;
                        }
                    });
                    this.title = res.data.questionnaireName;
                    this.freshInfo = list;
                });
            } else {
                this.$axios({
                    method: 'POST',
                    url: `/app/api/trainee/course/lesson/record/list`,
                    data: {
                        modId: this.$route.params.id
                    }
                }).then(res => {
                    console.log(res, '===');
                    let list = res.data[0].evaluationSubjectInfoList;
                    list.forEach(v => {
                        v.answer = '';
                    });
                    this.title = res.data[0].questionnaireName;
                    this.freshInfo = list;
                });
            }
        },
        getTitleInfo() {
            // trainee/eva/detail/181
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/eva/detail/${this.$route.params.id}`
            }).then(res => {
                this.evaDetail = res.data;
            });
        }
    },
    mounted() {
        this.mod_id = this.$route.params.id;
        // 是否是查看评估问卷
        if (this.$route.query.status === 1 || this.$route.query.status === '1') {
            this.isView = true;
        }
        this.getTitleInfo();
        this.getFreshDetail();
        this.type = this.$route.params.type;
        if (this.type === 'course') {
            this.msgTitle = this.$t('mod_SVY');//'课程评估问卷'
        }
    }
};
</script>

<style scoped>
    .box-12 {
        padding: 38px 15px 5px;
    }
    .box-13 {
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
    }
    .box-13.box-position {
        position: absolute;
        top: 56px;
        left: 0;
        z-index: 101;
        width:100%;
        overflow-y:auto;
        -webkit-overflow-scrolling: touch;
    }
    .box-13 ul li {
        float: left;
        margin-right: 40px;
    }
    .box-13 ul li:nth-last-child(1) {
        margin-right: 0;
    }
    .module-box-12>div {
        padding: 30px 15px;
    }
    .module-box-12>div>p {
        margin-bottom: 40px;
    }
    .module-list-06 li {
        color: #999999;
        font-size: 14px;
        border: 1px solid #e6e6e6;
        border-radius: 2px;
        padding: 15px 15px 15px 45px;
        margin-bottom: 15px;
    }
    .module-list-06 li:nth-last-child(1) {
        margin-bottom: 0;
    }
    .module-list-06 li.cur {
        background: #f5f8fe;
        border-color: #075ebb;
        color: #075ebb;
    }
    .module-list-06.selection-01 li i {
        float: left;
        margin-left: -30px;
        width: 20px;
        height: 20px;
        background: url(../../../static/images/icon-04.png) no-repeat 0 -96px;
        background-size: 20px;
    }
    .module-list-06.selection-01 li.cur i {
        background-position: 0 -156px;
    }
    .module-list-06.selection-02 li i {
        float: left;
        margin-left: -30px;
        width: 20px;
        height: 20px;
        background: url(../../../static/images/icon-04.png) no-repeat 0 -126px;
        background-size: 20px;
    }
    .module-list-06.selection-02 li.cur i {
        background-position: 0 -186px;
    }
    .detail-top-count {
        position: relative;
        width:100%;
        z-index: 2;
    }
    .detail-top-count-float {
        position: fixed;
        width:100%;
        z-index: 2;
        top:0;
        left:0
    }
    .sub-title{
        background: white;
        padding: 10px 20px;
        color: #666;
    }
</style>
